<!-- 商品推荐列表组件（自适应手机宽度） -->
<template>
    <div class="recommend">
        <div v-for="(item, index) in recommendData" :key="index" class="recommend-item">
            <img
                :src="item.icon"
                class="recommend-img"
                alt="推荐商品"
            >
            <div class="recommend-title">
                <p>{{ item.categoryName }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps(['recommendData']);
</script>

<style scoped>
/* 外层容器：使用网格布局，自动适应屏幕宽度 */
.recommend {
    display: grid;
    /* 每行显示4个项目（可调整），自动计算列宽，列间距10px */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; /* 项目之间的间距 */
    padding: 10px 16px; /* 左右留边距，避免贴边 */
    box-sizing: border-box; /* 确保padding不影响总宽度 */
}

/* 单个推荐项：占满网格列宽，无需固定宽度 */
.recommend-item {
    text-align: center;
}

/* 图片：宽度自适应父容器，高度按比例缩放 */
.recommend-img {
    width: 100%; /* 图片宽度=父容器宽度（自适应屏幕） */
    aspect-ratio: 1 / 1; /* 宽高比1:1，保持正方形 */
    border-radius: 8px;
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
    background-color: #f5f5f5; /* 加载前的占位背景 */
}

/* 标题：自适应父容器宽度 */
.recommend-title p {
    margin: 8px 0 0;
    font-size: 12px; /* 手机端小字体，避免换行 */
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>